<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>滚动监听</title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <style>
        nav{
        	position: fixed;
        	top: 100px;
        	
        }
            main{
            	width: 400px;
            	margin-left: 100px;
            }
            div{
            	height: 600px;
            }
            #floor1{background-color: red;}
            #floor2{background-color: blue;}
            #floor3{background-color: yellow;}
            #floor4{background-color: oldlace;}
            #floor5{background-color: olive;}
            #floor6{background-color: orange;}
        </style>
    </head>
    <!--data-spy='scroll' bootstrap监听body的滚动-->
    <!--data-target='#nav'  bootstrap监听到变化之后，改变的样式元素-->
    <body data-spy='scroll' data-target='#nav'>
    	<!--bootstrap滚动监听须要使用 nav>ul>li>a-->
    	<nav id="nav">
    		<ul class="nav nav-pills nav-stacked">
    			<li class="active"><a href="#floor1">F1</a></li>
    			<li><a href="#floor2">F2</a></li>
    			<li><a href="#floor3">F3</a></li>
    			<li><a href="#floor4">F4</a></li>
    			<li><a href="#floor5">F5</a></li>
    			<li><a href="#floor6">F6</a></li>
    		</ul>
    	</nav>
    	<main>
    		<div id="floor1">
    			<h1>fllo1</h1>
    		</div>
    		<div id="floor2">
    			<h1>flloo2</h1>
    		</div>
    		<div id="floor3">
    			<h1>floo3</h1>
    		</div>
    		<div id="floor4">
    			<h1>floor4</h1>
    		</div>
    		<div id="floor5">
    			<h1>floor5</h1>
    		</div>
    		<div id="floor6">
    			<h1>floor6</h1>
    		</div>
    	</main>
        
        
    </body>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
    	$(function(){
    		
    		//bootstrap 给我们提供了一个事件 activate.bs.scrollspy	，每当有新项目被滚动监听激活时，会触发这个事件
    		$('#nav').on('activate.bs.scrollspy',function(){
    			//获取当前active的li标签
    			console.log($('li.active').text())
    		})
    		
    		
    		//bootstrap 给我们提供了一个方法scrollspy() 作用时可以替代body标签中的data-spy='scroll'属性，用来设置监听元素
//  		$('body').scrollspy()
    		
    		
    	})
    </script>
</html>